

//轮播图图片
var time1, time2
var i = 1;
function photo() {
  time1 = setInterval(() => {
    var $newfirst = $('#ul li:first-child').html();
    $('#ul li:first-child').animate({
      "margin-left": "-1519px"
    }, 1000)
    setTimeout(() => {
      $('#ul li:first-child').remove();
      $('#ul').append(`<li>${$newfirst}</li>`);
    }, 1000);
  }, 3000);
}
//轮播图原点
function point() {
  //设置切换时间
  time2 = setInterval(() => {
    //获取原点位置
    i++;
    if (i > 4) {
      i = 1
    }
    //根据i有颜色的原点显示到相应位置
    $(`#ol li:nth-child(${i})`).html("<img src='../images/首页img/滚动条.png'></img>");
    $(`#ol li:nth-child(${i})`).siblings().html("<img src='../images/首页img/滚动条2.png'></img>");
  }, 3000);
}
window.onload = function () {
  //鼠标移入时轮播图暂停
  $('.lunbo').on('mouseenter', function () {
    clearInterval(time1);
    clearInterval(time2);
  })
  //鼠标移出时轮播图继续
  $('.lunbo').on('mouseleave', function () {
    photo();
    point();
  })
  //执行轮播图相应控件
  photo();
  point();







}






async function fn() {
  let movies;
  let operas;
  //获取动态数据
  await $.ajax({
    url: "https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllMovies",
    success: function (data) {
      movies = data.movies;
      $("#tsz").css("display","none")
      $("#zbj").css("display","none")
      movies.filter(function (v, i) {
        //上半部分列表
        if (i < 8) {
          var $div = $("<div class='movieCard'></div>");
          $div.html(
            `<a href="details.html?id=${v.id}">
            <div class="photo">
            <div class="imgCard">
            <img src="${v.imgSrc}">
            <button><a href="cinema.html?id=${v.id}">立即购票<a></button>
            </div>
            <p>${v.title}</p>
            <i>9.5</i>
            </div>
            </a>`)
          $('#first').append($div);
        }
        //下半部分数据
        else if (i < 16) {
          var $div = $("<div class='movieCard'></div>");
          $div.html(
            `<a href="film.html">
            <div class="photo">
            <div class="imgCard">
            <img src="${v.imgSrc}">
            <ul>
              <li><a  class="specialA">预告片</a></li>
              <li><a>预售</a></li>
            </ul>
            </div>
            <p>${v.title}</p>
            <i>9.5</i>
            </div>
            </a>`)
          $('#second').append($div);
        }
      })
      movies.forEach(movie => {
        $('#movies').append($(
          `<option>${movie.title}</option>`
        ));
      })
    }
  })

  // 影院与影片联动
  await $.ajax({
    url: "https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllOperas",
    success: function (data) {
      operas = data.operas;
      operas.forEach(opera => {
        $('#cinema').append($(
          `<option>${opera.name}</option>`
        ));
      })
    }
  })
  //获取下拉菜单的值
  $('#cinema').on('change', function () {
    $("#movies").children().remove()
    let opera = operas.find(opera => opera.name == $(this).val());
    opera.movies.forEach(movieid => {
      let movie = movies.find(movie => movie.id == movieid);
      $("#movies").append($(
        `<option>${movie.title}</option>`
      ));
    });
  })
}
fn();


